<template>
  <el-card shadow="navar">
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" size="medium" label-width="120px">
        <el-col :span="12">
          <el-form-item label="支付方式" prop="payType">
            <el-select
              v-model.number="formData.payType"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in dict.type.finance_payType"
                :key="item.value"
                :label="item.label"
                :value="parseInt(item.value)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付流水号" prop="payFlowNo">
            <el-input
              v-model.trim="formData.payFlowNo"
              :disabled="disabled"
              placeholder="暂无"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付金额" prop="paidAmount">
            <el-input
              v-model.trim="formData.paidAmount"
              :disabled="disabled"
              placeholder="暂无"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付状态" prop="payStatus">
            <el-select
              v-model.number="formData.payStatus"
              :disabled="disabled"
              placeholder="暂无"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in dict.type.finance_payStatus"
                :key="item.value"
                :label="item.label"
                :value="parseInt(item.value)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付完成时间" prop="paidTime">
            <el-date-picker
              v-model.trim="formData.paidTime"
              :disabled="disabled"
              type="datetime"
              placeholder="暂无"
              :style="{ width: '100%' }"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="会员编号" prop="customerNo">
            <el-input
              v-model.trim="formData.customerNo"
              :disabled="disabled"
              placeholder="暂无"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="业务编号" prop="orderNo">
            <el-input
              v-model.trim="formData.orderNo"
              :disabled="disabled"
              placeholder="暂无"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="买家账号" prop="buyerAccount">
            <el-input
              v-model.trim="formData.buyerAccount"
              :disabled="disabled"
              placeholder="暂无"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动名称" prop="activityName">
            <el-input
              v-model.trim="formData.activityName"
              :disabled="disabled"
              placeholder="暂无"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="买家姓名" prop="memberName">
            <el-input
              v-model.trim="formData.memberName"
              :disabled="disabled"
              placeholder="暂无"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="买家电话" prop="memberPhone">
            <el-input
              v-model.trim="formData.memberPhone"
              :disabled="disabled"
              placeholder="暂无"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button @click="goBack">取消</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </el-card>
</template>
<script>
import { getOrderPaymentRecordById } from '@/api/finance/activity'
export default {
  name: 'activity_detail',
  dicts: ['finance_payType', 'finance_payStatus'],
  data() {
    return {
      disabled: true,
      formData: {},
    }
  },
  filters: {
    typeFilter(val, type) {
      if (val === null) return null
      let data = type.filter((item) => {
        return val == item.value
      })
      if (data.length) {
        return data[0].label
      } else {
        return val
      }
    },
  },
  created() {
    this.getOrderPaymentRecordById()
  },
  methods: {
    getOrderPaymentRecordById() {
      getOrderPaymentRecordById({ id: this.$route.params.id }).then((res) => {
        this.formData = res.data
      })
    },
    goBack() {
      this.$router.go(-1) // 返回
      //关闭子页面
      this.$store.state.tagsView.visitedViews.splice(
        this.$store.state.tagsView.visitedViews.findIndex(
          (item) => item.path === this.$route.path
        ),
        1
      )
      this.$router.push(
        this.$store.state.tagsView.visitedViews[
          this.$store.state.tagsView.visitedViews.length - 1
        ].path
      )
    },
  },
}
</script>